<template>
  <cube-scroll class="getSeller">
    <div class="getSeller-content">
      <div class="overview">
        <h1 class="title">{{ seller.name }}</h1>

        <div class="desc border-bottom-1px">
          <cube-rate v-model="value"></cube-rate>
          <span class="text">({{ seller.ratingCount }})</span>
          <span class="text">月售{{ seller.sellCount }}单</span>
        </div>
        <ul class="remark">
          <li class="block">
            <h2>起送价</h2>
            <div class="content">
              <span class="stress">{{ seller.minPrice }}</span
              >元
            </div>
          </li>
          <li class="block">
            <h2>商家配送</h2>
            <div class="content">
              <span class="stress">{{ seller.deliveryPrice }}</span
              >元
            </div>
          </li>
          <li class="block">
            <h2>平均配送时间</h2>
            <div class="content">
              <span class="stress">{{ seller.deliveryTime }}</span
              >分钟
            </div>
          </li>
        </ul>
        <!--收藏-->
        <div class="favorite" @click="isCollections" ref="collectionRef">
          <i :class="classObject"></i>
          <span class="text">{{ collectionTxt }}</span>
        </div>
      </div>
      <div class="bulletin">
        <h1 class="title">公告与活动</h1>
        <div class="content-wrapper border-bottom-1px">
          <p class="content">{{ seller.bulletin }}</p>
        </div>
        <ul class="supports">
          <li
            class="support-item border-bottom-1px"
            v-for="item of seller.supports"
            :key="item.type"
          >
            <span class="support-ico">
              <img :src="imgs[item.type].url" alt />
            </span>
            <span class="text">{{ item.description }}</span>
          </li>
        </ul>
      </div>
      <div class="pics">
        <h1 class="title">商家实景</h1>
        <cube-scroll class="pic-wrapper">
          <ul class="pic-list">
            <li
              class="pic-item"
              v-for="imgList of seller.pics"
              :key="imgList.index"
            >
              <img :src="imgList" alt />
            </li>
          </ul>
        </cube-scroll>
      </div>
      <div class="info">
        <h1 class="title border-bottom-1px">商家信息</h1>
        <ul>
          <li
            class="info-item border-bottom-1px"
            v-for="(infosList, index) of seller.infos"
            :key="index"
          >
            {{ infosList }}
          </li>
        </ul>
      </div>
    </div>
  </cube-scroll>
</template>
<script>
import { getVal } from '../api';
import { saveToLocal, loadFromLocal } from '../common/js/storage';
export default {
  name: 'getSeller',
  props: {
    data: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      value: 4,
      collectionTxt: '收藏',
      isAcitve: true,

      classObject: {
        active: false,
        'cubeic-like': true,
      },

      imgs: [
        {
          imgid: 0,
          url: require('../assets/imgs/icon0.png'),
        },
        {
          imgid: 1,
          url: require('../assets/imgs/icon1.png'),
        },
        {
          imgid: 2,
          url: require('../assets/imgs/icon2.png'),
        },
        {
          imgid: 3,
          url: require('../assets/imgs/icon3.png'),
        },
        {
          imgid: 4,
          url: require('../assets/imgs/icon4.png'),
        },
      ],
    };
  },
  computed: {
    seller() {
      return this.data.seller || {};
    },
    favoriteText() {
      return this.favorite ? '已收藏' : '收藏';
    },
  },
  methods: {
    isCollections() {
      let active = this.classObject.active,
        collectionTxt = this.collectionTxt;
      active = active ? false : true;
      collectionTxt = collectionTxt == '已收藏' ? '收藏' : '已收藏';
    },
    toggleFavorite() {
      this.favorite = !this.favorite;
      saveToLocal(this.seller.id, 'favorite', this.favorite);
    },
  },
  created() {
    // this.favorite = loadFromLocal(this.seller.id, 'favorite', false);
  },
};
</script>

<style lang="stylus" scoped>
.getSeller {
  height: 100%;
  text-align: left;

  .overview {
    position: relative;
    padding: 18px;

    .title {
      margin-bottom: 8px;
      line-height: 14px;
      font-size: 14px;
      color: #666;
    }

    .desc {
      display: flex;
      align-items: center;
      padding-bottom: 18px;

      .star {
        margin-right: 8px;
      }

      .text {
        margin-right: 12px;
        line-height: 18px;
        font-size: 12px;
        color: $color-grey;
      }
    }

    .remark {
      display: flex;
      padding-top: 18px;

      .block {
        flex: 1;
        text-align: center;
        border-right: 1px solid #d9dde1;

        &:last-child {
          border: none;
        }

        h2 {
          margin-bottom: 4px;
          line-height: 10px;
          font-size: 12px;
          color: $color-light-grey;
        }

        .content {
          line-height: 24px;
          font-size: 12px;
          color: #666;

          .stress {
            font-size: 24px;
          }
        }
      }
    }

    .favorite {
      position: absolute;
      width: 50px;
      right: 11px;
      top: 18px;
      text-align: center;

      .cubeic-like {
        display: block;
        margin-bottom: 4px;
        line-height: 24px;
        color: #ccc;

        &.active {
          color: red;
        }
      }

      .text {
        line-height: 10px;
        font-size: 12px;
        color: $color-grey;
      }
    }
  }

  .bulletin {
    padding: 18px 18px 0 18px;
    white-space: normal;

    .title {
      margin-bottom: 8px;
      line-height: 14px;
      color: #666;
      font-size: 14px;
    }

    .content-wrapper {
      padding: 0 12px 16px 12px;

      .content {
        line-height: 24px;
        font-size: 13px;
        color: red;
      }
    }

    .supports {
      .support-item {
        display: flex;
        align-items: center;
        padding: 6px 12px;

        &:last-child {
          border-none();
        }
      }

      .support-ico {
        margin-right: 6px;
        width: 15px;
        height: 15px;
        display: inline-block;

        img {
          width: 100%;
        }
      }

      .text {
        line-height: 16px;
        font-size: 13px;
        color: #666;
      }
    }
  }

  .pics {
    padding: 18px;

    .title {
      margin-bottom: 12px;
      line-height: 14px;
      color: #666;
      font-size: 14px;
    }

    .pic-wrapper {
      display: flex;
      align-items: center;

      .pic-list {
        .pic-item {
          display: inline-block;
          margin-right: 6px;
          width: 32.5%;
          margin-right: 0.8%;
          height: 90px;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }

          &:last-child {
            margin: 0;
          }
        }
      }
    }
  }

  .info {
    padding: 18px 18px 0 18px;
    color: #666;

    .title {
      padding-bottom: 12px;
      line-height: 14px;
      font-size: 14px;
    }

    .info-item {
      padding: 10px 8px;
      font-size: 12px;
      white-space: nowrap;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      box-sizing: border-box;
    }
  }
}
</style>
